<div class="fc-header-right right">
	<span
		class="fc-button fc-button-today fc-state-default fc-corner-left #{if now}fc-state-disabled#{/if}"><span
		class="fc-button-inner"><span class="fc-button-content">Aujourd'hui</span><span
			class="fc-button-effect"><span></span>
		</span>
	</span>
	</span><span class="fc-button fc-button-prev fc-state-default"><span
		class="fc-button-inner"><span class="fc-button-content">&nbsp;◄&nbsp;</span><span
			class="fc-button-effect"><span></span>
		</span>
	</span>
	</span><span class="fc-button fc-button-next fc-state-default"><span
		class="fc-button-inner"><span class="fc-button-content">&nbsp;►&nbsp;</span><span
			class="fc-button-effect"><span></span>
		</span>
	</span>
	</span>
</div>
#{set months = date.getMonths(days) /}
#{set now = date.clone() /}
<table id="validationTable" border=0 cellspacing=0 cellpadding=0>
	<thead>
		<tr>
		<th></th>
		 #{list items:months, as:'m'}
		<th colspan="${m.days}" class="ui-state-default">${m.date.format("MMMMM")}</th>
		 #{/list}
		</tr>
		<tr>
			<th>&{'userByDay'}</th> #{list items:0..days, as:'i'}
			<th class="ui-state-default">${now.addDay().format("EEE dd")}</th>
			#{/list}
		</tr>
	</thead>
	<tbody>
		#{list items:detailedUsers, as:'user'}
		<tr class="${user_parity}">
			<td>${user.getFullName()}</td> 
			#{set now = date.clone() /}
			#{set nbDays = 0 /}
			#{list items:0..days, as:'i'}
				%{now.addDay()}%
				#{if nbDays > 1}
					%{
						nbDays = nbDays - 1;
					}%
				#{/if}
				#{else}
					#{set req = now.getRequest(user.getRequests()) /}
					#{if req != null}
					#{set nbDays = now.getTime().getNbDays(req.getTo()) + 1/}
					%{
						if(nbDays > days || nbDays <= 0){
							nbDays = days - i + 1;
						}
					}%
				
					<td class="holiday ${req.getStatus()}" colspan="${nbDays}">
					<span class="left">
					%{
					onclickValue = "";
					icon = "ui-icon-notice";
					if(req.getStatus().toString().equals("PENDING")){
						icon = "ui-icon-help";
						onclickValue = "displayPopupUpdateRequest(" + user.getId().toString() + "," + req.getId().toString() + ", \"" + req.getAskComment().toString() + "\")";
					} else if(req.getStatus().toString().equals("ACCEPTED")){
						icon = "ui-icon-check";
					}
					}%
					<li title=".${icon}" class="ui-state-default ui-corner-all" onclick="${onclickValue}"><span class="ui-icon ${icon}"></span></li>
					</span>
					<span style="padding-left:5px;">${types.get(new Long(req.getTypeId()-1L).intValue()).getDescription()}</span>
					
					</td>
					#{/if}
					#{else}
						<td></td>
					#{/else}
				#{/else}
			#{/list}
		</tr>
		#{/list}
	</tbody>
</table>
<script>
$(".fc-button").hover(function(){
	$(this).addClass("fc-state-hover");
}, function(){
	$(this).removeClass("fc-state-hover");
});

$(".fc-button").click(function(){
	if($(this).hasClass("fc-state-disabled")){
		return false;
	}
	$(this).addClass("fc-state-down");
	return true;
});
var paginateAction = #{jsAction @ValidRequests.paginate(':time',':days') /}
var todayAction = #{jsAction @ValidRequests.today() /}
var svDayPaginate = "";

$(".fc-button-today").click(function(){
	$.post(todayAction(),null,function(data){
		$("#ui-tabs-3").html(data);
	});
	return false;
});
$(".fc-button-prev").click(function(){
	return paginate(-${days});
});

$(".fc-button-next").click(function(){
	return paginate(${days});
});

$("#dialog-form-request").dialog({
	autoOpen : false,
	height : 350,
	width : 350,
	modal : true,
	buttons : {
		Accepter : function() {
			updateRequest('A');
			$(this).dialog("close");
		},
		Refuser : function() {
			updateRequest('R');
			$(this).dialog("close");
		}
	}
	
});

function paginate(days){
	svDayPaginate = days;
	$.post(paginateAction({
		time: ${date.getTimeInMillis()},
		days: days	
	}),null,function(data){
		$("#ui-tabs-3").html(data);
	});
	return false;
}

function displayPopupUpdateRequest(userId, requestId, observation) {
	$("#userIdUpdate").val(userId);
	$("#requestIdUpdate").val(requestId);
	$("#observation").val(observation);
	$("#comment").val("");
	$("#dialog-form-request").dialog("open");
}

function updateRequest(status) {
	var createAction = #{jsAction @ValidRequests.updateRequest(':userId',':requestId',':status',':comment') /}
	userId = $("#userIdUpdate").val();
	requestId = $("#requestIdUpdate").val();
	comment = $("#comment").val();
	// Call Create Action
	$.post(createAction({userId:userId, requestId:requestId, status:status, comment:comment}), 
			null,function(data) {
		//Prepend Results to the List
		paginate(svDayPaginate);
	});
	
}


</script>

<div id="dialog-form-request" title="&{'validrequest.updateRequestStatus'}">
	<p class="validateTips"></p>
	<form>
		<input type="hidden" id="userIdUpdate"/>
		<input type="hidden" id="requestIdUpdate"/>
		<fieldset>
			<label for="observation">&{'table.observation'} :</label> <input type="text"
				name="observation" id="observation" disabled="disabled" class="text ui-widget-content ui-corner-all" />
			<label for="comment">&{'validrequest.comment'} :</label> <input type="text"
				name="comment" id="comment" value=""
				class="text ui-widget-content ui-corner-all" /> 
			
		</fieldset>
	</form>
</div>